<template>
    <div class="container">
        <div class="target-area" @mouseover="handleMouseEnter" @mousemove="handleMouseMove"
            @mouseleave="handleMouseLeave(200)">
            {{ content }}
        </div>
        <div class="menu" v-if="isShow" @mousemove="handleMouseMove1" @mouseleave="handleMouseLeave(20)">
            sad
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const isMouseOver = ref(false);
const isShow = ref(false)
const content = ref("")
const timeoutId = ref(); // 用于存储定时器的 ID

// 鼠标进入区域时触发
const handleMouseEnter = () => {
    console.log('鼠标进入指定区域');
    isMouseOver.value = true;
};

// 鼠标移动时触发
const handleMouseMove = (event: MouseEvent) => {
    if (isMouseOver.value) {
        isShow.value = true;
        content.value = `您移动到 ${event.clientX}, ${event.clientY} 的位置`;
        console.log(`鼠标在区域内的位置：X=${event.clientX}, Y=${event.clientY}`);
    }
};

// 鼠标离开区域时触发
const handleMouseLeave = (time: number) => {
    console.log('鼠标离开指定区域');
    timeoutId.value = setTimeout(() => {
        console.log('延迟执行的函数被触发');
        isShow.value = false;
        // 在这里执行你需要的功能
    }, time); // 延迟 2000 毫秒（2 秒）

    isMouseOver.value = false;
};

const handleMouseMove1 = (event: MouseEvent) => {
    console.log('鼠标在菜单上移动');
    isShow.value = true;
    clearTimeout(timeoutId.value);
    isMouseOver.value = false;
};
</script>

<style>
.target-area {
    width: 300px;
    height: 200px;
    background-color: #4caf50;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.target-area:hover {
    background-color: #45a049;
}

.menu {
    margin-top: 10px;
    background-color: #45a049;
}
</style>
